<template>
	<div class="gpsBox absolute bottom-4 px-3 py-2 flex flex-col">
		<div class="date-top flex items-center justify-between">
			<div class="flex items-center">
				<p class="date-top-p"></p>
				<p class="date-top-txt ml-3">GPS在线率</p>
			</div>
			<div class="wrap-right flex items-center">
				<div class="item flex items-center">
					<div class="icon-box"></div>
					<span class="ml-1">在线</span>
				</div>
				<div class="item flex items-center ml-5">
					<div class="icon-box" style="background: #dcdcdc"></div>
					<span class="ml-1">离线</span>
				</div>
				<span class="ml-10 text-[#2596FF]">在线率：{{ countVal }}%</span>
			</div>
		</div>
		<div class="slider-box">
			<el-tooltip
				v-for="(item, index) in sliderPositions"
				:key="index"
				:content="item.tooltip"
				placement="top"
			>
				<div
					class="slider-item"
					:style="{
						left: item.left + '%',
						width: item.width + '%',
					}"
				></div>
			</el-tooltip>
		</div>
	</div>
</template>
<script setup lang="ts" name="GpsText">
import { getCarOnline } from '/@/api/trajectory/vehicle';
import dayjs from 'dayjs';

const props = defineProps({
	timePeriod: {
		type: Array,
		default: () => [''],
	},
	hphm: {
		type: String,
		default: '',
	},
});

// 添加事件发射
const emit = defineEmits(['update:onlineRate']);

const countVal = ref(90);
const totalTime = ref({
	start_time: props.timePeriod[0],
	end_time: props.timePeriod[1],
});

const sliderPositions = ref([]);
// 获取在线率
getOnline();
function getOnline() {
	getCarOnline({
		startTime: props.timePeriod[0],
		endTime: props.timePeriod[1],
		hphm: props.hphm,
	})
		.then((res) => {
			if (res.code === 0) {
				let sliderArr = res.data.filter(
					(timeSlot) => timeSlot.start_time && timeSlot.end_time,
				);
				calcSlider(totalTime.value, sliderArr);
			}
		})
		.catch((err) => {
			console.log(err);
		});
}
// 计算在线率
function calcSlider(totalTime, sliderArr) {
	const totalDuration = dayjs(totalTime.end_time).diff(
		dayjs(totalTime.start_time),
	);

	sliderPositions.value = sliderArr.map((timeSlot) => {
		if (timeSlot.start_time && timeSlot.end_time) {
			const start = dayjs(timeSlot.start_time).diff(
				dayjs(totalTime.start_time),
			);
			const duration = dayjs(timeSlot.end_time).diff(
				dayjs(timeSlot.start_time),
			);

			return {
				left: (start / totalDuration) * 100,
				width: (duration / totalDuration) * 100,
				tooltip: `上线时间: ${dayjs(timeSlot.start_time).format('YYYY-MM-DD HH:mm:ss')}\n在线时长: ${Math.round(duration / 1000)}秒`,
			};
		} else {
			return {
				left: 0,
				width: 0,
			};
		}
	});

	// 计算在线率
	const totalOnlineTime = sliderArr.reduce((acc, timeSlot) => {
		return acc + dayjs(timeSlot.end_time).diff(dayjs(timeSlot.start_time));
	}, 0);

	countVal.value = Math.round((totalOnlineTime / totalDuration) * 100);

	// 发射事件，将在线率传递给父组件
	emit('update:onlineRate', countVal.value);
}

/* onMounted(() => {
    calcSlider(totalTime.value, sliderArr.value)
  })*/
</script>
<style lang="scss" scoped>
.gpsBox {
	left: 34%;
	width: 511px;
	height: 88px;
	background: #ffffff;
	box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	.date-top-p {
		width: 5px;
		height: 20px;
		background: #2596ff;
		border-radius: 3px;
	}
	.date-top-txt {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 18px;
		color: #222222;
		line-height: 24px;
	}
	.date-top-txt2 {
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 14px;
		color: #999999;
		line-height: 24px;
	}
	.dateList span {
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 14px;
		color: #666666;
		line-height: 24px;
	}
	.dateList .active {
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 14px;
		color: #2596ff;
		line-height: 24px;
	}

	.wrap-right {
		.icon-box {
			width: 20px;
			height: 14px;
			background: #2596ff;
			border-radius: 3px;
		}
	}
	.slider-box {
		position: relative;
		margin-top: 20px;
		width: 100%;
		height: 10px;
		border-radius: 5px;
		background-color: #dcdcdc;
		.slider-item {
			position: absolute;
			height: 100%;
			background-color: #2596ff;
			border-radius: 5px;
			cursor: pointer;
		}
	}
}
</style>
